<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>消息通知</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/layer.css" />
    <link rel="stylesheet" type="text/css" href="../css/mdw.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../script/swiper.min.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/layer.js"></script>
    <script type="text/javascript" src="../script/mdw.js"></script>
    <script type="text/javascript" src="../script/jumpPage.js"></script>

</head>
<body >
    <header class="header">
        <div class="backPrevPage" onclick="historyBack()"></div>
        <div class="pageTitle">消息通知</div>
    </header>
    <section class="messagePage HTML_BOX">
        <div class="bg-eee" style="border-bottom:.2rem solid #EEE ; "></div>
        <ul class="msgList plr">
            <!-- li class on 代表新消息 没有class on代表已读消息 -->
            <!-- <li class="on">
                <div class="icon icon1"></div>
                <div class="msgBox1">
                    <div class="msgTitle">
                        <div class="msgName"><span>系统通知</span>
                            <div class="newMsg2"></div>
                        </div>
                        <div class="msgTime">今天 15:38</div>
                    </div>
                    <div class="msgContent">恭喜您已成功注册商城成为会员咯！现在您可以去</div>
                </div>
            </li>
            <li>
                <div class="icon icon2"></div>
                <div class="msgBox1">
                    <div class="msgTitle">
                        <div class="msgName"><span>通知消息</span>
                            <div class="newMsg2"></div>
                        </div>
                        <div class="msgTime">今天 15:38</div>
                    </div>
                    <div class="msgContent">恭喜您已成功注册商城成为会员咯！现在您可以去</div>
                </div>
            </li> -->
        </ul>
        
        <div class="pageHide dn">暂无数据..</div>
    </section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    var page = 1;
    var ifpage = true;
    apiready = function(){
        $api.fixStatusBar($api.dom('header'));
        api.setStatusBarStyle({
            color: '#fff',//设置APP状态栏背景色
            style: 'dark'
        });
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                 threshold: 10
            }
         }, function(ret, err) {
             //页码+1，继续请求数据
             if(ifpage){
                page++;
                ready();
             }
        });
        ifCnAndEn();
        ready();
    };
    function ready(){
        pop.loading();
        getAjax(Interface.member_massage,{token:token,is_see:0,page:page},function(res){
            console.log(JSON.stringify(res));
            var list = res.data;
            if(page==1){
                $(".msgList").empty();
            }
            if(list){
                
                $(".pageHide").addClass("dn");ifpage=true;
                $.each(list,function(i,item){
                    var html ='<li id="msg_'+item.id+'">';
                            html+='<div class="icon icon2"></div>';
                            html+='<div class="msgBox1">';
                                html+='<div class="msgTitle">';
                                msg='通知消息';
                                if(cnen==2){
                                    msg='Message';
                                }
                                    html+='<div class="msgName"><span>'+msg+'</span>';
                                        html+='<div class="newMsg2"></div>';
                                    html+='</div>';
                                    html+='<div class="msgTime">'+timestampToTime(item.create_time)+'</div>';
                                html+='</div>';
                            html+='<div style="display:flex;align-items: flex-start;margin-top:0.1rem;"><div class="msgContent">'+item.content+'</div><i class="msg_delete" onclick="delete_msg('+item.id+')"></i></div>';
                            html+='</div>';
                        html+='</li>';
                    $(".msgList").append(html);
                })
                if(list.length<10){
                    $(".getPage").hide();
                }
            }else{
                 ifpage=false;
                 if(page==1){$(".pageHide").removeClass("dn");}
            }
            pop.close();
        },function(res,err){})
    }
    $(".getPage").click(function(){
        page++;
        ready();
    })

    function delete_msg(id){
        pop.loading();
        getAjax(Interface.message_delete,{id:id},function(res){
            console.log(res);
            pop.close();
            pop.notice(res.msg);
            deleteElement($("#msg_"+id),1);

        },function(res,err){})
    }
    function timestampToTime(timestamp) {
        //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var date = new Date(timestamp * 1000);
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' '
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y+M+D+h+m+s;
    }
</script>
<script type="text/javascript">
    function ifCnAndEn(){
        if(cnen==2){
            $(".pageTitle").eq(0).html('Message');
            $(".pageHide").html('Not data');
        }
    }
</script>
</html>